<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中标计算器</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 14px;
            font-family: Consolas;
        }
        #body-wrap {
            width: 600px;
            margin: 0 auto;
        }
        h3 {
            font-size: 18px;
            text-align: center;
            line-height: 60px;
            height: 60px;
        }
        .row {
            padding-bottom: 10px;
            display: flex;
            flex: 1;
            align-items: center;
        }
        .label {
            font-size: 14px;
            width: 80px;
            justify-content: center;
            align-items: center;
        }
        .txt {
            width: 260px;
            height:30px;
            text-indent: 10px;
            outline: none;
            flex: 1;
        }
        .btn {
            margin: 0 auto;
            width: 160px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            display: block;
            border: none;
            background: #00ec20;
            border-radius: 5px;
            color: rgb(253, 253, 253);
            outline: none;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #15d53b;
        }
        .notification {
            width: 100%;
            height: 30px;
            text-indent: 10px;
            line-height: 30px;
            background: #fff709;
            border: 1px solid #e9e307;
            color: #f00;
            display: none;
        }
        .selfWrap, .otherWrap {
            border: 1px dotted #333;
            margin-bottom: 30px;
            padding: 10px;
        }
        .score {
            width: 60px;
            height: 30px;
            line-height: 30px;
            border-radius: 10px;
            margin-left: 10px;
            background: #15d53b;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            color: #fff;
        }
        #logs {
            width: 100%;
            height: 200px;
            resize: none;
            padding: 10px;
            font-size: 12px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<div id="body-wrap">
    <div class="row">
        <div class="notification" id="notification">请输入</div>
    </div>
    <div id="stage1" class="stage">
        <h3>请输入企业数量</h3>
        <div class="row">
            <span class="label">自家数量:</span>
            <input type="text" class="txt" id="selfLtdCount" placeholder="请输入自家企业数量" value="3">
        </div>
        <div class="row">
            <span class="label">非自家数量:</span>
            <input type="text" class="txt" id="otherLtdCount" placeholder="请输入非自家企业数量" value="6">
        </div>
        <div class="row">
            <input type="button" class="btn" onclick="gotoStage2()" value="生成价格界面">
        </div>
    </div>
    <div id="stage2" class="stage">
        <h3>主界面</h3>

        <h6>自家报价</h6>
        <div class="selfWrap" id="selfWrap">
<!--            <div class="row">-->
<!--                <span class="label">报价1:</span>-->
<!--                <input type="text" class="txt selfPrice" >-->
<!--                <span class="score"></span>-->
<!--            </div>-->
        </div>
        <h6>非自家报价</h6>
        <div class="otherWrap" id="otherWrap">
<!--            <div class="row">-->
<!--                <span class="label">报价2:</span>-->
<!--                <input type="text" class="txt selfPrice" >-->
<!--                <span class="score"></span>-->
<!--            </div>-->
        </div>
        <div class="row">
            <input type="button" class="btn" value="开始计算" onclick="calcScore()">
        </div>
        <div class="row">
            <textarea id="logs" cols="30" rows="10" contenteditable="false" disabled="disabled"></textarea>
        </div>
    </div>
</div>

<script>
var DEBUG_MODE = true;
function $(id) { return document.getElementById(id); }
// 显示警告信息
function showMsg(msg) {
    $('notification').style.display = 'block';
    $('notification').innerHTML = msg;
    setTimeout(function() {
        $('notification').style.display = 'none';
    }, 5*1000);
}
var selfLtdCount = 0, otherLtdCount = 0;
// 进入stage2
function gotoStage2() {
    selfLtdCount = +$('selfLtdCount').value,
        otherLtdCount = +$('otherLtdCount').value;
    if(selfLtdCount < 1 || selfLtdCount > 6) {
        return showMsg('自家数量应在1-6之间');
    }
    if (otherLtdCount < 2 || otherLtdCount > 20) {
        return showMsg('非自家数量应在2-20之间')
    }
    // 生成自家价格列表
    var selfHtml = '';
    for (var i = 0; i < selfLtdCount; i++) {
        var idx = i+1;
        var price = randPrice(); // ;
        selfHtml += '<div class="row" id="company'+idx+'">\n' +
            '                <span class="label">报价'+idx+':</span>\n' +
            '                <input type="text" class="txt selfPrice" id="price'+idx+'" value="'+price+'">\n' +
            '                <span class="score" id="score'+idx+'"></span>\n' +
            '            </div>';
    }
    var otherHtml = '';
    for (var i = 0; i < otherLtdCount; i++) {
        var idx = i+1+selfLtdCount;
        var price = randPrice(); //;
        otherHtml += '<div class="row" id="company'+idx+'">\n' +
            '                <span class="label">报价'+idx+':</span>\n' +
            '                <input type="text" class="txt otherPrice" id="price'+(idx)+'" value="'+price+'">\n' +
            '                <span class="score" id="score'+idx+'"></span>\n' +
            '            </div>';
    }
    $('selfWrap').innerHTML = selfHtml;
    $('otherWrap').innerHTML = otherHtml;
}
function randPrice() {
    return 0;
}
// 计算基准分
function calcSum(a, b) {
    return (a*100+b*100)/100;
}
function calcScore() {
    // 需要去除的分数
    var calcSteps = [];
    var totalCount = otherLtdCount+selfLtdCount;
    calcSteps.push('本次共计'+totalCount+'个报价,其中非自家报价'+otherLtdCount+'个');
    var needSpliceCount = Math.floor(totalCount/5);
    calcSteps.push('需要剔除最高最低值'+needSpliceCount+'对');
    var totalPriceArr = [], originPriceArr = [];
    for (var i = 0; i < totalCount; i++) {
        var price = +$('price'+(i+1)).value;
        totalPriceArr[i] = price;
        originPriceArr[i] = price;
    }
    calcSteps.push('所有的报价为: '+totalPriceArr.join(','));
    totalPriceArr.sort();
    calcSteps.push('对报价进行排序: '+totalPriceArr.join(','));
    // 剔除最高最低价格
    var excludesMaxPrices = totalPriceArr.splice(-needSpliceCount);
    var excludesMinPrices = totalPriceArr.splice(0, needSpliceCount);
    calcSteps.push('剔除的最高价格有: '+excludesMaxPrices);
    calcSteps.push('剔除的最低价格有: '+excludesMinPrices);
    calcSteps.push('剔除后剩余的价格: '+totalPriceArr.join(','));
    var totalPrice = 0;
    for (var i = 0; i < totalPriceArr.length; i++) {
        totalPrice = calcSum(totalPriceArr[i], totalPrice);
    }
    var avgPrice = +(totalPrice/totalPriceArr.length).toFixed(2);
    calcSteps.push('平均值为: ' + avgPrice);
    var maxScore = [0, 0], minScore = [100, 0];
    // 开始计算偏离值
    for (var i = 0; i < originPriceArr.length; i++) {
        var price = originPriceArr[i];
        if (excludesMinPrices.indexOf(price) > -1) {
            continue;
        }else if (excludesMaxPrices.indexOf(price) > -1) {
            continue;
        }
        var offsetValue = ((price-avgPrice)/avgPrice*100).toFixed(2);
        var offsetScore = offsetValue > 0
        ? offsetValue : -offsetValue*0.5;
        var scoreIdentifier = (60-offsetScore);
        var score = scoreIdentifier.toFixed(2);
        calcSteps.push('第'+(i+1)+'家信息: 报价='+price+', 平均报价='+avgPrice+', 差值='+(price-avgPrice).toFixed(2)
            +', 差值分='+offsetScore+', 最终得分='+score);
        console.log(price, avgPrice, (price-avgPrice), offsetScore, offsetValue, score);

        if (maxScore[0] < score) {
            maxScore = [score, i];
        }
        if (minScore[0] > score) {
            minScore = [score, i];
        }

        startAnimated($('score'+(i+1)), 60, scoreIdentifier, 1, offsetScore/100);

        // $('score'+(i+1)).innerText = score;
        // $('score'+(i+1)).style.backgroundColor = 'rgba(21, 231, 59, '+(1-offsetValue/100)+')';
    }
    console.log('最高分和最低分: ', maxScore, minScore);

    setTimeout(function () {
        $('score'+(maxScore[1]+1)).style.backgroundColor = 'rgba(255, 0, 0, 0.6)';
        // $('score' + (maxScore[1] + 1)).innerText = score;
        $('score'+(minScore[1]+1)).style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
        // $('score' + (minScore[1] + 1)).innerText = score;
    }, 1000);
    showLogs(calcSteps);
}
function showLogs(arr) {
    var originTxt = $('logs').value;
    var timer = setInterval(function(){
        originTxt += arr.shift()+'\r\n';
        $('logs').value = originTxt;
        if(arr.length == 0) {
            clearInterval(timer);
        }
    }, 100);
}
function startAnimated(obj, fromVal, targetVal, startDept, targetDept) {
    obj.innerText = fromVal;
    var frames = 30;
    var timer = setInterval(function() {
        fromVal = calcSum(fromVal, -1);
        obj.innerText = fromVal.toFixed(2);
        if (startDept > targetDept) {
            startDept = calcSum(startDept, -0.05);
        }
        obj.style.backgroundColor = 'rgba(21, 231, 59, '+(1-startDept)+')';
        if (fromVal < targetVal) {
            obj.innerText = targetVal.toFixed(2);
            obj.style.backgroundColor = 'rgba(21, 231, 59, '+(1-targetDept)+')';
            clearInterval(timer);
        }
    }, frames);
}

if (DEBUG_MODE) {
    randPrice = function() { return +(Math.random()*1000/100+10).toFixed(2); }
    gotoStage2();
    calcScore();
}
</script>
</body>
</html>